import React, {useState, useCallback} from 'react';
// 注意：useCallback一定要合理使用，否则会浪费执行效率。
function App(props) {
    const [num, setNum] = useState(1);
    const [age, setAge] = useState(100);
    // useCallback第一个参数是函数,第二个参数是一个数组
    // 如果将第二个参数设置为[],那么函数中的数据不会受到外部的影响。
    // 如果将第二个参数设置为[num],当num发生改变时，函数会去除记忆。
    // 如果省略第二个参数，相当于没有使用userCallback
    const changeNum = useCallback(function () {
        if ((num + 1) > 5) return;
        setNum(num + 1);
    }, [num])


    const changeAge = useCallback(function () {
        if ((age + 2) > 110) return;
        setAge(age + 2);
    },[age])
    return (
        <div>
            <button onClick={changeNum}>num:{num}</button>
            <button onClick={changeAge}>age:{age}</button>
        </div>
    );
}

export default App;